<template>
    <div class='only-page'>
        <img :src="obj.img" alt="">
        <p>{{ obj.content }}</p>
        <p style="color: #ffaa0f">{{ toTwo(obj.price) }}</p>
        <button v-if="bool" @click="bool = false">修改价格</button>
        <div v-else>
            <input type="text" v-model.number="price"><br>
            <button @click="butn">确认</button><button @click="bool = true">取消</button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, inject, ref } from 'vue';
const oList = defineProps({
    obj: {
        type: Object,
        default: () => { }
    }
})
let bool = ref(true)
let price = ref()
let butn = () => {
    // console.log('obj', oList.obj);
    if (price.value === undefined || !price) {
        alert("请输入修改的价格！")
        return
    }
    modifyP(price.value, oList.obj.id)
    bool.value = true
    price.value = undefined
}
const modifyP = inject('modifyP')
let toTwo = num => {
    return "￥" + num
}
</script>

<style scoped>
.only-page {
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 60px;
    padding: 5px;
    font-size: 16px;
    text-align: left;
}

img {
    width: 100%;
    height: 280px;
    object-position: bottom left;
    object-fit: cover;
}

p {
    margin: 5px;
}

input {
    font-size: 14px;
}

button {
    font-size: 14px;
}
</style>